<template>
	<view class="p-2">
		<view v-if="bannerList.length!=0">
			<u-swiper :list="bannerList" keyName="cover" height="350rpx" @click="swiperClick"></u-swiper>
		</view>

		<view class="bg-white p-2 mt-2">
			<view class="mb-1 " v-if="brandList.length!=0">
				竞拍列表
			</view>
			<view class="py-1" v-if="brandList.length!=0">
				<u-tabs :list="brandList" :activeStyle="{color:'#00B0FF'}" lineColor="#00B0FF" @click="clickBrand">
					<view slot="right" style="padding-left: 4px;">
						<u-icon name="arrow-right-double" size="14" bold></u-icon>
					</view>
				</u-tabs>
			</view>
			<u-gap height="1" bgColor="#eaeaea" marginTop="10rpx" marginBottom="10rpx"></u-gap>
			<view class="tag-item-box flex flex-wrap j-sb py-2" v-if="app_bidding_status.length!=0">
				<view :class="['tag-item',activeTags==index?'active':'']" v-for="(item, index) in app_bidding_status"
					:key="index" @click="radioTagsClick(index,item)">
					{{item.label}}
				</view>
			</view>
		</view>

		<view class="bg-white p-2">
			<view v-if="biddingListsData.length!=0">
				<view class="flex j-sb mb-3 border-bottom pb-3" v-for="(item,index) in biddingListsData" :key="index"
					@click="navigateTo('pages/client/home/bidding?id='+item.id)">
					<image-preview :src="item.reportImg" width="135rpx" height="135rpx" :multiple="false" />
					<view class="flex-1 ml-3">
						<view class="flex j-sb a-center mb-2">
							<view class="font-bold">{{item.model}}</view>
							<view class="font-md">
								<!-- <dict-tag :options="app_bidding_status" :value="item.biddingStatus" /> -->
								{{dictKey(app_bidding_status,item.biddingStatus)}}
							</view>
						</view>
						<view class="text-secondary font mb-1">
							{{item.brand}}
						</view>
						<view class="flex j-sb a-center">
							<view>
								<view v-if="item.memory" class="text-secondary font">{{item.memory}}G</view>
							</view>
							<view class="btn btn-lightmuted" v-if="item.biddingStatus==2"
								@click.stop="handleQuote(item)">取消</view>
							<view class="btn" v-if="item.biddingStatus==1">立即报价</view>
						</view>
					</view>
				</view>
			</view>
			<empty v-else />
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>

	</view>
</template>

<script>
	import constant from '@/constant/constant.js'
	import {
		advertise
	} from '@/common/api/system.js'
	import {
		brandEnableList,
	} from '@/common/api/brand.js'
	import {
		biddingLists,
		cancleBiddingQuote
	} from '@/common/api/bidding.js'
	export default {
		components: {},
		data() {
			return {
				isTop: 0,
				bannerList: [],
				brandList: [],
				activeTags: 0,
				biddingListsData: [],
				query: {
					saleUserId: null, //销售用户ID
					brandId: '', //手机品牌Id
					biddingStatus: 0, //竞价状态
				},
				scrollTop: 0

			}
		},
		async onLoad() {

			if (this.app_user_info.id) {
				await this.getadvertise();
				await this.biddingStatus();
				await this.getBrandLists();
			} else {
				uni.reLaunch({
					url: constant.StorageName.APP_HOME_PATH
				})
			}
		},
		async onShow() {
			if (this.app_user_info.id) {
				await this.searchList();
				await this.cacheHelper.updateUserInfo();
			}
		},
		// onPageScroll(e) { 
		// 	console.log(e,'---')
		// 	if (e.scrollTop > 100) {
		// 		this.isTop = 1;
		// 	} else {
		// 		this.isTop = 0;

		// 	}
		// },
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.isLoadMore = false;
			this.biddingListsData = [];
			this.query.pageNo = 1;
			this.searchList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.query.pageNo += 1;
				this.getLists();
			}
		},
		methods: {
			getadvertise() {
				advertise({
					channelId: '3001',
					type: '4001'
				}).then(res => {
					this.bannerList = res.data
				})
			},
			swiperClick(index) {
				console.log()
				let id = this.bannerList[index].id
				uni.navigateTo({
					url: '/pages/index/advertise?id=' + id
				})
			},
			clickBrand(val) {
				this.query.brandId = val.id;
				this.searchList();
			},
			searchList() {
				this.isLoadMore = false;
				this.biddingListsData = [];
				this.query.pageNo = 1;
				this.getLists()
			},
			getBrandLists() {
				brandEnableList().then(res => {
					this.brandList = res.data;
					this.brandList.unshift({
						name: '全部',
						id: ''
					})
				})
			},
			getLists() {
				this.query.saleUserId = this.app_user_info.id;
				biddingLists(this.query).then(res => {
					if (res.data.list.length == 0) {
						let oldLoad = {}
						this.isLoadMore = true;
						oldLoad = Object.assign({}, this.query);
						oldLoad.pageNo = this.query.pageNo;
						this.query = oldLoad
						this.$forceUpdate()
						return
					}

					this.isLoadMore = false;
					let oldList = this.biddingListsData || []
					oldList.push(...res.data.list)
					this.biddingListsData = oldList
				})
			},
			scrollView(e) {
				if (!this.isLoadMore) {
					this.isLoadMore = true;
					this.query.page_no += 1;
					this.getLists();
				}
			},
			radioTagsClick(index, item) {
				this.activeTags = index;
				this.query.biddingStatus = item.value;
				this.searchList();
			},
			handleQuote(item) {
				uni.showModal({
					title: '提示',
					content: '确定要取消竞价吗？',
					success: res => {
						if (res.confirm) {
							cancleBiddingQuote(item.id).then(res => {
								this.searchList();
								uni.$u.toast('取消成功');
							})
						} else if (res.cancel) {

						}
					}
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	.tag-item-box {
		.tag-item {
			color: #888888;
			padding: 2px 10rpx;
			border-radius: 4px;
			border: 1px solid #eaeaea;
			font-size: 24rpx;
			display: inline-block;
			margin-bottom: 10rpx;
		}

		.active {
			color: var(--danger);
			border-color: var(--danger);
		}
	}

	.scroll-Y {
		width: 100%;
		height: 100%;
	}
</style>